<template>
  <div class="bottom-tool" v-if="!!selectedFiles.length">
    <el-checkbox
      @change="change"
      :indeterminate="
        selectedFiles.length > 0 && selectedFiles.length < tableData.length
      "
      v-model="selectAll"
      label=""
    />
    <div style="margin: 0px 5px 0px 0px">全选本页</div>
    <div style="margin-right: 80px; color: #86909c">
      已选择 {{ selectedFiles?.length ?? 0 }} 个
    </div>
    <el-button
      v-if="showCheckOut ?? false"
      @click.stop="batchCheckout"
      size="small"
      plain
      style="margin: 0px 4px; border: none"
      >检出</el-button
    >
    <el-button
      v-if="showExport ?? true"
      @click.stop="batchExport"
      size="small"
      plain
      style="margin: 0px 4px; border: none"
      >导出</el-button
    >
    <el-button
      v-if="showDel ?? true"
      @click.stop="batchDelete"
      size="small"
      plain
      style="margin: 0px 4px; border: none"
      color="#D54941"
      >删除</el-button
    >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from "vue";
  const selectAll = ref(false);
  const emit = defineEmits();
  const props = defineProps([
    "selectedFiles",
    "showCheckOut",
    "tableData",
    "showDel",
    "showExport",
  ]);

  /**
   * @description 处理checkbox
   */
  const change = (val: boolean) => {
    console.log(val, "valalalldd");
    emit("changeCheckbox", val);
  };

  watch(
    () => props.selectedFiles,
    (newValue) => {
      selectAll.value = newValue.length === props.tableData?.length;
    },
  );

  /**
   * 批量检出
   */
  const batchCheckout = () => {
    emit("batchCheckout");
  };

  /**
   * 批量导出
   */
  const batchExport = () => {
    emit("batchExport");
  };

  /**
   * 批量删除
   */
  const batchDelete = () => {
    emit("batchDelete");
  };
</script>

<style scoped lang="scss">
  .bottom-tool {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    padding: 0 5px 0px 11px;
    font-size: 13px;
    box-sizing: border-box;
    background-color: #e4f4ff;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }
</style>
